<template>
    <div class="dialog-box" v-loading="loading">
        <el-dialog v-model="dialogVisible" width="587" class="my-dialog">
            <div class="star-change_card">
                <div class="star-change_card-title">修改星级</div>
                <star :level="level" :canEdit="true" @change="onLevelChange"/>
                <div class="confirm-btn" @click="onClickConfirmLevel">確認</div>
            </div>
        </el-dialog>
    </div>
</template>
<script setup>
import { ref } from "vue";
import star from './star.vue'
import { ElMessage } from "element-plus";

const dialogVisible = ref(false);
const level = ref(0);
const loading = ref(false);
let rowData = {};
let reqEditAPI = null;
let reqInitAPI = null;

const onLevelChange = (newLevel) => {
    level.value = newLevel;
}

const showDialog = (rowInfo,reqEdit,reqInit) => {
    level.value = rowInfo.level;
    rowData = rowInfo;
    reqEditAPI = reqEdit;
    reqInitAPI = reqInit;
    dialogVisible.value = true;
}

const hideDialog = () => {
    dialogVisible.value = false;
}

const onClickConfirmLevel = async () => {
    // 调用接口修改星级 参数为rowData 和 level.value
    loading.value = true;
    clog("修改星级接口参数", {
        ...rowData,
        level: level.value
    });
    const res = await reqEditAPI({
        ...rowData,
        level: level.value
    });
    clog("修改星级接口返回数据", res);
    loading.value = false;
    ElMessage.success('修改星级成功');
    reqInitAPI();
    hideDialog();
}

defineExpose({
    showDialog,
    hideDialog
});
</script>
<style scoped lang="scss">
.dialog-box {
    :deep(.el-dialog) {
        width: 587px;
        padding: 0;
        .el-dialog__header {
            padding-bottom: 0;
        }
    }
}

.star-change_card {
    display: flex;
    flex-direction: column;
    align-items: center;
    border-radius: 7px;
    background: #FFFFFF;
    box-shadow: 0px 4px 10px 0px #0000004C;
    padding-top: 28px;
    margin: 0 auto;
    margin-top: 52px;
    width: 587px;
    height: 310px;

    .star-change_card-title {
        color: #3D3D3D;
        font-weight: bold;
        font-size: 24px;
        margin-bottom: 42px;
    }

    .confirm-btn {
        margin-top: 95px;
        width: 138px;
        height: 49px;
        border-radius: 3px;
        background-color: #2FC2AF;
        text-align: center;
        line-height: 49px;
        color: #fff;
        font-weight: bold;
        cursor: pointer;

        &:hover {
            opacity: 0.8;
        }
    }
}
</style>